import React, { useState,useRef } from 'react'
import { Button } from "antd";
import _  from 'lodash';
import classNames from 'classnames';
import { v4 as uuidv4 }  from 'uuid'
import dayjs from 'dayjs';
import './index.css';
import avatar from '../../../assets/imgs/01.jpg';

// 进行创建评论列表数据
const list = [
    {
        // 评论id
        rpid: 3,
        // 用户信息
        user: {
            uid: '13258165',
            avatar,
            uname: '周杰伦',
        },
        // 评论内容
        content: '哎哟，不错哦',
        // 评论时间
        ctime: '10-18 08:15',
        like: 88,
    },
    {
        rpid: 2,
        user: {
            uid: '36080105',
            avatar,
            uname: '许嵩',
        },
        content: '我寻你千百度 日出到迟暮',
        ctime: '11-13 11:29',
        like: 88,
    },
    {
        rpid: 1,
        user: {
            uid: '30009257',
            avatar,
            uname: '黑马前端',
        },
        content: '学前端就来黑马',
        ctime: '10-19 09:00',
        like: 66,
    }
]

// 当前登录用户信息
const user = {
    // 用户id
    uid: '30009257',
    // 用户头像
    avatar,
    // 用户昵称
    uname: '黑马前端',
}


// 创建评论列表切换tab栏
const tabs = [
    { type: 'hot', text: '最热' },
    { type: '', text: '||' },
    { type: 'time', text: '最新' },
]

const FirstOtherPage = () => {
    const [commentList, setCommentList] = useState(_.orderBy(list, 'like', 'desc'))
    const [type, setType] = useState('hot')
    const inputRef = useRef(null)
    // 发表评论
    const  [content,setContent] = useState('')
    // 删除点击事件
    const handleClick = (id) => {
        console.log('删除评论')
        console.log(id);
        // 对commentList进行过滤
        setCommentList(commentList.filter(item => item.rpid !== id))
    }

    // tab 切换事件
    const handleTabChange = (type) => {
        setType(type)
        //基于列表的排序
        if (type === 'hot') {
            // 根据点赞数排序
            // 排序工具lodash
            // 排序内容    排序字段      排序方式
            setCommentList(_.orderBy(commentList, 'like', 'desc'))
            
        } else if (type === 'time') {
            // 根据评论时间排序
            setCommentList(_.orderBy(commentList, 'ctime', 'desc'))
        }
    }
    const handlePublish = () =>{
        setCommentList([
            ...commentList,
            {
                rpid: uuidv4(), //随机id
                user: {
                    uid: '30009257',
                    avatar,
                    uname: '黑马前端',
                },
                content: content,
                ctime: dayjs(new Date()).format('MM-DD HH:mm'), //格式化 
                like: 66,
            }
        ])
        // 清空输入框内容
        setContent('')
        // 重新聚焦
        inputRef.current.focus()
    }
    
    return (
        <div className='replyList'>
            {/* 顶部导航栏 */}
            <div className='reply-navigation'>
                {/* tab导航栏 */}
                <ul className='tab-list'>
                    <li className='nav-title'>
                        <span className="nav-title-text">评论</span>
                        {/* 评论数量 */}
                        <span className="total-reply">{10}</span>
                    </li>
                    <li className="nav-sort">
                        {
                            tabs.map(item => (
                                <span  key={item.type}
                                 onClick={() => handleTabChange(item.type)}
                                //  className={`nav-item ${type===item.type && 'active'}`}
                                className={classNames('nav-item', { active: type===item.type})}
                                 >
                                    {item.text}
                                </span>
                            ))
                        }
                    </li>
                </ul>
            </div>
            {/* 评论输入框 */}
            <div className='reply-input'>
                {/* 头像 */}
                <div className="reply-box-avatar">
                    <div className="bili-avatar">
                        <img className="bili-avatar-img" src={avatar} alt="用户头像" />
                    </div>
                    <div className="reply-box-wrap">
                        {/* 评论框 */}
                        <textarea
                            className="reply-box-textarea"
                            placeholder="发一条友善的评论"
                            value={content}
                            ref={inputRef}
                            onChange={(e)=> setContent(e.target.value)}
                        />
                        {/* 发布按钮 */}
                        <Button className="send-text" type='primary' onClick={handlePublish}>发布</Button>
                    </div>
                </div>
                {/* 评论列表 */}
                <div className="reply-list">
                    {/* 头像 */}
                    {
                        commentList.map(item => (
                            <div className='reply-item' key={item.rpid}>
                                <div className="root-reply-avatar">
                                    <div className="bili-avatar">
                                        <img
                                            className="bili-avatar-img"
                                            alt=""
                                            src={item.user.avatar}
                                        />
                                    </div>
                                </div>
                                <div className="content-wrap">
                                    {/* 用户名 */}
                                    <div className="user-info">
                                        <div className="user-name">{item.user.uname}</div>
                                    </div>
                                    {/* 评论内容 */}
                                    <div className="root-reply">
                                        <span className="reply-content">{item.content}</span>
                                        <div className="reply-info">
                                            {/* 评论时间 */}
                                            <span className="reply-time">{item.ctime}</span>
                                            {/* 评论数量 */}
                                            <span className="reply-time">点赞数:{item.like}</span>
                                            {/* 通过user与item中的uid相等的时候才显示对应的删除权限 */}
                                            {
                                                user.uid === item.user.uid && (
                                                    <span className="delete-btn" onClick={() => handleClick(item.rpid)}>
                                                        删除
                                                    </span>
                                                )
                                            }
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )
                        )
                    }
                </div>


            </div>
        </div>
    )

}
export default FirstOtherPage